<template>
  <div>
      <nav-header/>
      <Header/>
      <side-bar/>
      <div class="menu-content">
          <div class="menu-content-item">
            <loading v-show="isLoading"/>
            <!-- 不能使用v-else 否则无限循环 -->
            <router-view v-show="!isLoading"/> 
          </div>
      </div>
  </div>
</template>

<script>
import Header from './Header.vue'
import NavHeader from './Nav-header.vue'
import SideBar from './Side-bar.vue'
import { mapGetters, mapActions, mapState } from "vuex";
import Loading from './Loading.vue';
export default{
  name:"Main",
  components: { Header, NavHeader, SideBar, Loading },
  data() {
    return {
      permission : JSON.parse(sessionStorage.getItem('pemission'))
    }
  },
  watch: {
    user : {
        immediate:true,
        handler : function(newVal, oldVal) {
          if(!newVal) this.setUser(JSON.parse(sessionStorage.getItem('account')))
        }
    }
  },
  computed: {
    ...mapState('user',['user']),
    ...mapState('loading',['isLoading']),
    test : function() {
      return this.$axios.toWarning
    }
  },
  methods: {
    ...mapActions('user',['setUser'])
  },
  created() {
    this.$axios.havePostPermission = JSON.parse(sessionStorage.getItem('pemission'))
  }
}
</script>


<style lang="less" scoped>
.menu-content{
  box-sizing: border-box;
  width: 100%;
  min-width: 1445px;
  height: 100%;
  padding-left: 300px;
  padding-top: 6rem;
  position: absolute;
  left: 0;
  top: 0;
  .menu-content-item{
    box-sizing: border-box;
    width: 100%;
    padding-top: 30px;
    padding-right: 20px;
    padding-left: 20px;
  }
}
</style>